<template>
    <div class="cdkey-group-list-page">
        <el-card shadow="never">
            <!-- <el-tabs v-model="activeName">
                <el-tab-pane label="兑换码详情列表" name="first"></el-tab-pane>
                <el-tab-pane label="已兑换列表" name="second"></el-tab-pane>
            </el-tabs> -->
            <div class="flex items-center">
                <div class="text-lg">兑换码详情列表</div>
                <el-select
                    @change="fetchData"
                    class="ml-auto mr-2"
                    v-model="form.isExchanged"
                    placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="未兑换" :value="false"></el-option>
                    <el-option label="已兑换" :value="true"></el-option>
                </el-select>
                <el-button @click="onExport" type="primary">导出</el-button>
            </div>
            <div class="mt-4" v-loading="loading">
                <el-table :data="data">
                    <el-table-column label="兑换码" prop="code"/>
                    <el-table-column label="兑换账号时长">
                        <template slot-scope="{row}">
                            {{ row.length }}{{ row.length_unit === 1 ? '天' :
                                row.length_unit === 2 ? '周' : '月' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="是否已兑换">
                        <template slot-scope="{row}">
                            {{ row.exchange_at ? '已兑换' : '未兑换' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="兑换用户邮箱" prop="email"/>
                    <el-table-column label="使用日期">
                        <template slot-scope="{row}">
                            {{ row.exchange_at | timeFormat }}
                        </template>
                    </el-table-column>
                    <el-table-column label="创建日期">
                        <template slot-scope="{row}">
                            {{ row.created_at | timeFormat }}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="操作">
                        <template slot-scope="{row}">
                            <el-button
                                v-if="activeName === 'first'"
                                type="text"
                                @click="onDeleteClick(row)"
                                class="red-color">删除</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
            </div>
            <div v-if="totalElements > 0" class="footer flex justify-end items-center">
                <el-pagination
                    class="center"
                    @current-change="fetchData"
                    @size-change="fetchData"
                    :current-page.sync="form.page"
                    :page-size.sync="form.size"
                    layout="sizes, total, prev, pager, next, jumper"
                    :page-sizes="[10, 25, 50]"
                    :total="totalElements">
                </el-pagination>
            </div>
        </el-card>

        <div class="mt-4 text-center">
            <el-button @click="$router.back()">返 回</el-button>
        </div>
    </div>
</template>

<script>
// import { Tabs, TabPane } from 'element-ui';
import TimeFormats from '@/helpers/TimeFormats';

export default {
    components: {
        // ElTabs: Tabs,
        // ElTabPane: TabPane,
    },
    mixins: [require('@/mixins/CacheQuery').default],
    data() {
        return {
            activeName: 'first',
            loading: false,
            data: [],
            form: {
                page: 1,
                size: 10,
                codeGroupId: '',
                type: 1,
                isExchanged: '',
            },
            totalElements: 0,
        };
    },
    filters: {
        timeFormat(time) {
            if (!time) return;
            return new TimeFormats().convertTime('', time);
        },
    },
    watch: {
        activeName() {
            this.form.page = 1;
            this.fetchData();
        },
    },
    methods: {
        fetchData() {
            const pathUrl = this.activeName === 'first' ? '' : '/exchanged';

            this.loading = true;
            API.get(`exchange_code${pathUrl}`, {params: this.form}).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        onDeleteClick(row) {
            $ele.$confirm('是否删除此兑换码?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.delete(`exchange_code/${row.id}`).then(() => {
                    $ele.$message.success('删除成功');
                    this.fetchData();
                }).finally(() => {
                    this.loading = false;
                });
            }).catch(() => { });
        },
        onDialog() {
            this.visible = !this.visible;
        },
        onExport() {
            const id = this.$route.params.id;
            const query = `codeGroupId=${id}&isExchanged=${this.form.isExchanged}`;
            const url = `${process.env.VUE_APP_API_PREFIX}exchange_code/export?${query}`;
            window.location.href = url;
        },
    },
    mounted() {
        const id = this.$route.params.id;

        if (id) {
            this.form.codeGroupId = id;
            this.fetchData();
        }
    },
};
</script>

<style lang="scss">
.cdkey-group-list-page {
    .input-width {
        max-width: 300px;
    }

    .footer {
        height: 44px;
        background: #f7f7f7;
        padding-left: 20px;
        padding-right: 20px;
    }
}
</style>
